<template>
     <div class="category">
        <!--用于父组件需要根据子组件数据展示不同样式-->
        <h2>今日游戏榜单</h2>
        <slot name="default" :games="games" ></slot>
     </div>
</template>

<script lang="ts" setup name="GameCategory">
let games = [
    {id:'g00001',name:'王者荣耀'},
    {id:'g00002',name:'上古王冠'},
    {id:'g00003',name:'红色警戒'},
    {id:'g00004',name:'冰封王座'},
]
</script>

<style scoped>
.category {
    background-color: aquamarine;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
    width: 300px;
    height: 250px;
}
.category h2 {
    background-color: cadetblue;
}
</style>